<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Stream Blockchain Transactions | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Stream Blockchain Transactions" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="By the end of this tutorial you should know how to stream transactions and blocks from Steem blockchain." />
<meta property="og:description" content="By the end of this tutorial you should know how to stream transactions and blocks from Steem blockchain." />
<link rel="canonical" href="stream_blockchain_transactions.html" />
<meta property="og:url" content="stream_blockchain_transactions.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"By the end of this tutorial you should know how to stream transactions and blocks from Steem blockchain.","mainEntityOfPage":{"@type":"WebPage","@id":"stream_blockchain_transactions.html"},"@type":"BlogPosting","url":"stream_blockchain_transactions.html","headline":"JS: Stream Blockchain Transactions","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-stream-blockchain-transactions" class="row tutorials-javascript-stream-blockchain-transactions">
	<h3>
		<a id="tutorials-javascript-stream-blockchain-transactions">
			JS: Stream Blockchain Transactions
			
		</a>
	</h3>
	
		<span class="description"><p><em>By the end of this tutorial you should know how to stream transactions and blocks from Steem blockchain.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/13_stream_blockchain_transactions">Stream Blockchain Transactions</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of preparing and streaming blocks using the <code class="highlighter-rouge">blockchain.getBlockStream()</code> operation. Being able to stream blocks is crucial if you are building automated or follow up scripts or detect certain type of transactions on network or simply use it for your backend application to sync and/or work with data in real-time.</p>

<h2 id="intro">Intro</h2>

<p>Tutorial is demonstrating the typical process of streaming blocks on Steem. We will show some information from each block that is being streamed to give you an idea. Each block contains transactions objects as well but we will not show each of this data in user interface.</p>

<p>We are using the <code class="highlighter-rouge">blockchain.getBlockStream</code> function provided by <code class="highlighter-rouge">dsteem</code> which returns each block after it has been accepted by witnesses. By default it follows irreversible blocks which was accepted by all witnesses. Function follows or gets blocks every 3 seconds so it would not miss any new blocks. We will then extract part of this data and show it in list.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Configure proper settings for dsteem</li>
  <li><a href="#stream-blocks"><strong>Stream blocks</strong></a> Stream blocks</li>
  <li><a href="#display-result"><strong>Display result</strong></a> Show results in proper UI</li>
</ol>

<h4 id="1-app-setup">1. App setup<a name="app-setup"></a></h4>

<p>As usual, we have a file called <code class="highlighter-rouge">public/app.js</code>, which holds the Javascript segment of the tutorial. In the first few lines, we have defined the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">);</span>

<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>

<span class="c1">//connect to production server</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">STM</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="dl">'</span><span class="s1">0000000000000000000000000000000000000000000000000000000000000000</span><span class="dl">'</span><span class="p">;</span>

<span class="c1">//connect to server which is connected to the network/production</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.steemit.com</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the live network with the proper chainId, addressPrefix, and endpoint. Because this tutorial requires active transactions to see some data.</p>

<h4 id="2-stream-blocks">2. Stream blocks<a name="stream-blocks"></a></h4>

<p>Next, we have a <code class="highlighter-rouge">main</code> function which fires at on-load and starts streaming blocks from network.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">stream</span> <span class="o">=</span> <span class="nx">client</span><span class="p">.</span><span class="nx">blockchain</span><span class="p">.</span><span class="nx">getBlockStream</span><span class="p">();</span>
<span class="nx">stream</span>
    <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">data</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">block</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">//console.log(block);</span>
        <span class="nx">blocks</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span>
            <span class="s2">`&lt;div class="list-group-item"&gt;&lt;h5 class="list-group-item-heading"&gt;Block id: </span><span class="p">${</span>
                <span class="nx">block</span><span class="p">.</span><span class="nx">block_id</span>
            <span class="p">}</span><span class="s2">&lt;/h5&gt;&lt;p&gt;Transactions in this block: </span><span class="p">${</span>
                <span class="nx">block</span><span class="p">.</span><span class="nx">transactions</span><span class="p">.</span><span class="nx">length</span>
            <span class="p">}</span><span class="s2"> &lt;br&gt;Witness: </span><span class="p">${</span>
                <span class="nx">block</span><span class="p">.</span><span class="nx">witness</span>
            <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;p class="list-group-item-text text-right text-nowrap"&gt;Timestamp: </span><span class="p">${</span>
                <span class="nx">block</span><span class="p">.</span><span class="nx">timestamp</span>
            <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;/div&gt;`</span>
        <span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">blockList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">blocks</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">''</span><span class="p">);</span>
    <span class="p">})</span>
    <span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="dl">'</span><span class="s1">end</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="c1">// done</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">END</span><span class="dl">'</span><span class="p">);</span>
    <span class="p">});</span>
</code></pre></div></div>

<p>We have also defined <code class="highlighter-rouge">Pause</code> and <code class="highlighter-rouge">Resume</code> functions for relevant buttons to pause/resume stream at any moment.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//pause stream</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">pauseStream</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">state</span> <span class="o">=</span> <span class="nx">stream</span><span class="p">.</span><span class="nx">pause</span><span class="p">();</span>
<span class="p">};</span>

<span class="c1">//resume stream</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">resumeStream</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nx">state</span> <span class="o">=</span> <span class="nx">state</span><span class="p">.</span><span class="nx">resume</span><span class="p">();</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="3-display-result">3. Display result<a name="display-result"></a></h4>

<p>In above scection, following line of code populates object with the data coming from Stream:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">blocks</span><span class="p">.</span><span class="nx">unshift</span><span class="p">(</span>
    <span class="s2">`&lt;div class="list-group-item"&gt;&lt;h5 class="list-group-item-heading"&gt;Block id: </span><span class="p">${</span>
        <span class="nx">block</span><span class="p">.</span><span class="nx">block_id</span>
    <span class="p">}</span><span class="s2">&lt;/h5&gt;&lt;p&gt;Transactions in this block: </span><span class="p">${</span>
        <span class="nx">block</span><span class="p">.</span><span class="nx">transactions</span><span class="p">.</span><span class="nx">length</span>
    <span class="p">}</span><span class="s2"> &lt;br&gt;Witness: </span><span class="p">${</span>
        <span class="nx">block</span><span class="p">.</span><span class="nx">witness</span>
    <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;p class="list-group-item-text text-right text-nowrap"&gt;Timestamp: </span><span class="p">${</span>
        <span class="nx">block</span><span class="p">.</span><span class="nx">timestamp</span>
    <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;/div&gt;`</span>
<span class="p">);</span>
</code></pre></div></div>

<p>Example of output:</p>

<div class="language-json highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{</span><span class="w">
    </span><span class="err">block_id:</span><span class="w"> </span><span class="s2">"015d34f12bced299cec068500fdbf3070016160c"</span><span class="p">,</span><span class="w">
    </span><span class="err">extensions:</span><span class="p">[],</span><span class="w">
    </span><span class="err">previous:</span><span class="s2">"015d34f021e85b437c9fcb8cf47d9e258a1ad7e4"</span><span class="p">,</span><span class="w">
    </span><span class="err">signing_key:</span><span class="s2">"STM5zNNjMyCKbhcPgo5ca7jq9UBGVzpq6yoaHw1R2dKaZdxhcuwuW"</span><span class="p">,</span><span class="w">
    </span><span class="err">timestamp:</span><span class="s2">"2018-05-30T14:27:36"</span><span class="p">,</span><span class="w">
    </span><span class="err">transaction_ids:</span><span class="w">
        </span><span class="p">[</span><span class="s2">"0e7ce7445884c44346da4dafdef99ea7fda60bd0"</span><span class="p">,</span><span class="w"> </span><span class="s2">"194f404d3dab66459421792045625334f7465da1"</span><span class="p">],</span><span class="w">
    </span><span class="err">transaction_merkle_root:</span><span class="s2">"bc39f1fb9edbb02200d1ab0e68d3dbc4afc62aca"</span><span class="p">,</span><span class="w">
    </span><span class="err">transactions:</span><span class="p">[{</span><span class="err">…</span><span class="p">},</span><span class="w"> </span><span class="p">{</span><span class="err">…</span><span class="p">}],</span><span class="w">
    </span><span class="err">witness:</span><span class="s2">"good-karma"</span><span class="p">,</span><span class="w">
    </span><span class="err">witness_signature:</span><span class="s2">"2005f2d5f9d4000ca2ba76db5e555982e3ca47d6f6516ea1bacb316545b478d6617987afd71b5bf0b3f231fdc140453f9043b8ea981220cecf44118d50eedbe870"</span><span class="w">
</span><span class="p">}</span><span class="w">
</span></code></pre></div></div>

<p>That’s it!</p>

<h3 id="to-run-the-tutorial">To Run the tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/13_stream_blockchain_transactions</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

